<template>
  <el-card class="record-trend" shadow="never" v-loading="loading">
    <div class="card-title">
      <span>趋势图(今天、昨天按小时统计，其他按天数统计)</span>
      <el-tooltip effect="dark" content="刷新数据" placement="top">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          class="refresh-button"
          plain
          circle
          @click="refreshData"
        ></el-button>
      </el-tooltip>
    </div>
    <div class="record-trend-option">
      <el-radio-group v-model="dateType" size="mini" @change="dateTypeChange">
        <el-radio-button :label="1">今天</el-radio-button>
        <el-radio-button :label="2">昨天</el-radio-button>
        <el-radio-button :label="3">最近7天</el-radio-button>
        <el-radio-button :label="4">最近30天</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        size="mini"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :clearable="false"
        @change="getData"
      >
      </el-date-picker>
    </div>
    <div class="trend-tools clearfix">
      <el-radio-group v-model="trendType" size="mini" @change="setChart">
        <el-radio-button label="pv">浏览量（PV）</el-radio-button>
        <el-radio-button label="uv">访客数（UV）</el-radio-button>
        <el-radio-button label="ip">IP数</el-radio-button>
        <el-radio-button label="user">用户数</el-radio-button>
      </el-radio-group>
    </div>
    <div class="record-trend-chart" id="record-trend-chart"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      loading: false,
      dateType: 1,
      dateTime: '',
      trendType: 'pv',
      chartObj: null,
      xAxis: [],
      pvList: [],
      uvList: [],
      ipList: [],
      userList: []
    }
  },
  created() {
    this.dateTypeChange()
    this.getData()
  },
  activated() {
    if (this.chartObj) {
      this.chartObj.resize()
    }
  },
  methods: {
    getData() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysOperateRecord/pvAndUvAndIpAndUserTrend'),
        method: 'get',
        params: this.$ajax.setParams({
          startDate: this.dateTime[0],
          endDate: this.dateTime[1],
          flag: this.dateType === 1 || this.dateType === 2 ? 1 : 2
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.setChartData(data.data.trendGraphs)
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    setChartData(data) {
      var xAxis = []
      var pvList = []
      var uvList = []
      var ipList = []
      var userList = []
      data.forEach(item => {
        xAxis.push(item.key)
        pvList.push(item.pv)
        uvList.push(item.uv)
        ipList.push(item.ip)
        userList.push(item.user)
      })
      this.xAxis = xAxis
      this.pvList = pvList
      this.uvList = uvList
      this.ipList = ipList
      this.userList = userList
      this.setChart()
    },
    setChart() {
      if (!this.chartObj) {
        this.chartObj = echarts.init(document.getElementById('record-trend-chart'))
        window.addEventListener('resize', () => {
          this.chartObj.resize()
        })
      }
      this.chartObj.resize()
      this.chartObj.setOption(this.getChartOption(), true)
    },
    getChartOption() {
      var legend = []
      var data = ''
      switch (this.trendType) {
        case 'pv':
          legend = ['浏览量(PV)']
          data = this.pvList
          break
        case 'uv':
          legend = ['访客数(UV)']
          data = this.uvList
          break
        case 'ip':
          legend = ['IP数']
          data = this.ipList
          break
        case 'user':
          legend = ['用户数']
          data = this.userList
          break
      }
      var series = [
        {
          name: legend[0],
          type: 'line',
          data: data,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#4fa8f9'
          },
          itemStyle: {
            color: '#4fa8f9'
          },
          areaStyle: {
            color: '#4fa8f9',
            opacity: 0.2
          }
        }
      ]
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legend,
          bottom: 0,
          left: 'center'
        },
        grid: {
          top: 15,
          left: 0,
          right: 15,
          bottom: 25,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.xAxis,
          axisLine: {
            lineStyle: {
              color: '#dedede'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 2,
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#dedede'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: series
      }
      return option
    },
    dateTypeChange() {
      var time = new Date().getTime()
      var start = ''
      var end = ''
      var utils = this.$utils
      switch (this.dateType) {
        case 1:
          end = start = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 2:
          end = start = utils.formatDateTime(new Date(time - 86400000)).slice(0, 10)
          break
        case 3:
          start = utils.formatDateTime(new Date(time - 86400000 * 6)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
        case 4:
          start = utils.formatDateTime(new Date(time - 86400000 * 29)).slice(0, 10)
          end = utils.formatDateTime(new Date(time)).slice(0, 10)
          break
      }
      this.dateTime = [start, end]
      this.$nextTick(() => {
        this.getData()
      })
    },
    refreshData() {
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.tag-monitor-record {
  .record-trend {
    float: left;
    height: 400px;
    width: 100%;
    margin-bottom: 10px;
    .trend-tools {
      margin-top: 14px;
      height: 30px;
      font-size: 13px;
      line-height: 30px;
      .el-radio-group {
        float: left;
      }
    }
    .record-trend-chart {
      height: 300px;
      width: 100%;
    }
  }
  .record-trend-option {
    margin-top: 10px;
    .el-date-editor {
      vertical-align: middle;
      margin: 0 30px;
    }
  }
}
</style>
